@extends('admin.main')
@section('pageheader')
    <style>
        a.ibox{
            display:block;
            color:#676a6c;
        }
        .ibox .col-sm-4{
            font-size:40px;
            text-align:center;
        }
    </style>
@endsection
@section('content')

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-3">
            <a href="/admin/box?status=-1" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4 text-info">
                            <i class="fa fa-cube"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>总盒子</h5>
                            <h1 class="no-margins">{{$boxCount['box0']}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3">
            <a href="/admin/box?status=1" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4 text-warning">
                            <i class="fa fa-cube"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>即将搭配</h5>
                            <h1 class="no-margins">{{$boxCount['box3']}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3">
            <a href="/admin/box?status=2" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4 text-danger">
                            <i class="fa fa-cube"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>搭配中盒子</h5>
                            <h1 class="no-margins">{{$boxCount['box1']}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3">
            <a href="/admin/box?status=4" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4 text-success">
                            <i class="fa fa-cube"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>已发货盒子</h5>
                            <h1 class="no-margins">{{$boxCount['box2']}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3">
            <a href="/admin/box/care" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4 text-success">
                            <i class="fa fa-cube"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>关怀盒子</h5>
                            <h1 class="no-margins">{{$boxCount['box4']}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div>
<!--         <div class="col-lg-3">
            <a href="/admin/box/give" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4 text-success">
                            <i class="fa fa-cube"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>赠送盒子</h5>
                            <h1 class="no-margins">{{$boxCount['box5']}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div> -->
        <div class="col-lg-3">
            <a href="/admin/user" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>总微信用户</h5>
                            <h1 class="no-margins">{{$wechatCount}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3">
            <a href="/admin/user/vip" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <i class="fa fa-briefcase"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>总会员数量</h5>
                            <h1 class="no-margins">{{$vipCount}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3">
            <a href="/admin/order" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <i class="fa fa-file-text"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>订单累计收入</h5>
                            <h1 class="no-margins">{{$OrderCount}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3">
            <a href="/admin/energy" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <i class="fa fa-plug"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>能量补充</h5>
                            <h1 class="no-margins">{{$EnergyCount}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-3">
            <a href="/admin/goods/change" class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <i class="fa fa-send"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>换货申请</h5>
                            <h1 class="no-margins">{{$BoxRetreatCount}}</h1>
                        </div>
                    </div>
                </div>
            </a>
        </div>
<!--         <div class="col-lg-3">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <i class="fa fa-bicycle"></i>
                        </div>
                        <div class="col-sm-8">
                            <h5>活动参加</h5>
                            <h1 class="no-margins">{{$joinCount}}</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>用户</h5>
                </div>
                <div class="ibox-content">
                    <div id="user-chart" style="height:300px"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>订单</h5>
                </div>
                <div class="ibox-content">
                    <div id="order-chart" style="height:300px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pagescript')
    <script src="/assets/echarts/echarts.common.min.js"></script>
<script>
var ArrUser={!!json_encode($ArrUser)!!},ArrOrder={!!json_encode($ArrOrder)!!};
var user =new Array();
user['table'] = new Array();
user['data'] = new Array();

var order =new Array();
order['table'] = new Array();
order['data'] = new Array();



for(var key in ArrUser){
    user['table'].push(key);
    user['data'].push(ArrUser[key]);
}
for(var key in ArrOrder){
    order['table'].push(key);
    order['data'].push(ArrOrder[key]);
}
    $(function(){
        $("#side-menu li[rel='welcome']").addClass("active");
    });
    var userChartLine = echarts.init(document.getElementById('user-chart'));
    var optionUserLine = {
        xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data:user['table']
        },
        tooltip : {//鼠标悬浮弹窗提示
	       /*  trigger: 'axis' */
	    	trigger : 'item',
	    	show:true,
	        showDelay: 0,
	        hideDelay: 0,
	        transitionDuration:0, 
	        backgroundColor:'rgba(255,0,0,0.5)',
	        borderColor : '#f50',
	        borderRadius : 8,
	        borderWidth: 2,
	        padding: 10,    // [5, 10, 15, 20]

	    },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: user['data'],
            type: 'line'
        }]
    };
    userChartLine.setOption(optionUserLine);

    var orderChartLine = echarts.init(document.getElementById('order-chart'));
    var optionOrderLine = {
        xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data:order['table']
        },
        tooltip : {//鼠标悬浮弹窗提示
	       /*  trigger: 'axis' */
	    	trigger : 'item',
	    	show:true,
	        showDelay: 0,
	        hideDelay: 0,
	        transitionDuration:0, 
	        backgroundColor:'rgba(255,0,0,0.5)',
	        borderColor : '#f50',
	        borderRadius : 8,
	        borderWidth: 2,
	        padding: 10,    // [5, 10, 15, 20]

	    },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: order['data'],
            type: 'line'
        }]
    };
    orderChartLine.setOption(optionOrderLine);
</script>
@endsection
